<template>
  <div class="article-list-body" :style="{ width: 1200 + 'px' }">
    
    <!--二级板块信息-->
    <div class="article-panel">
      <div class="top-tab">
        <div @click="changeCategory('latest')"
        >
          最新
        </div>
        <el-divider direction="vertical"></el-divider>
        <div @click="changeCategory('recommended')"
        
        >
          推荐
        </div>
        <el-divider direction="vertical"></el-divider>
        <div @click="changeCategory('following')"

        >
          关注
        </div>
      </div>
    </div>
    <div class="list" v-loading.fullscreen.lock="loading">
      <el-empty v-if="list.length<=0" description="暂无数据" />
      <div class="rows"  v-for="(item, index) in list" :key="index" @click="nav(item)">
        <div
          class="left"
          :style="{ width: item.image ? 'calc(100% - 140px)' : '100%' }"
        >
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="bottom">
            <span class="user">{{ item.authorName }}</span>
            <span class="time">{{
              item.created ? moment(item.created).format('YYYY-MM-DD HH:mm:ss') : ""
            }}</span>
          </div>
        </div>
        <img :src="item.image" alt="" style="width:100px;height:100px;margin-left:20px">
      </div>
    </div>
    <div style="display: flex; justify-content: center" v-if="list.length>0">
      <el-pagination
        size="large"
        @current-change="handlePageChange"
        :current-page="page"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        style="margin: 20px auto"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  defineProps,
  onMounted,
  watch,
} from "vue";
import { getAllArticles,getRecommendedArticles,getFollowingArticles } from "@/api/article.js";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import moment from 'moment'
const store =useStore()
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const props = defineProps({
  searchText: {
    type: String,
    default: "",
  },
});
const list = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading=ref(false);
const category=ref('latest');

const getList = async () => {
  let token = localStorage.getItem("token")
  try{
    loading.value = true;
  let res;
  if (category.value === 'latest') {
    res = await getAllArticles(props.searchText,page.value);
  } else if (category.value === 'recommended') {
    if(!token){
      loading.value = false;
      return 
    }
    res = await getRecommendedArticles(page.value);
  } else if (category.value === 'following') {
    if(!token){
      loading.value = false;
      return 
    }
    res = await getFollowingArticles(page.value);
  }
  list.value = res.data.rows;
  total.value = res.data.total;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
}
catch(e){
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  }
};

watch(
  () => props.searchText,
  (val) => {
    getList();
  },
  { immediate: true }
);

watch(
  () => category.value,
  () => {
    getList();
  },
  { immediate: true }
);

onMounted(async () => {});
const getFormatTime = (arr) => {
  arr = arr.map((item) => {
    return (item = item < 10 ? "0" + item : item);
  });
  return (
    arr[0] +
    "-" +
    arr[1] +
    "-" +
    arr[2] +
    " " +
    arr[3] +
    ":" +
    arr[4] +
    ":" +
    arr[5]
  );
};
const handlePageChange = (e) => {
  page.value = e;
  getList();
};

const changeCategory = (newCategory) => {
  category.value = newCategory;
  page.value = 1;
};

const nav=(item)=>{
  store.commit("joinArticleId",item.id)
  store.commit("joinUserId",item.authorId)
  router.push({path:"/detail",params: { detail:"other" }})
}
</script>

<style lang="scss">
.article-list-body {
  .article-panel {
    background: #fff;
    .top-tab {
      display: flex;
      align-items: center;
      padding: 10px;
      font-size: 15px;
      border-bottom: 1px solid #ddd;
    }
    .top-tab>div{
      cursor: pointer;
    }
  }
}
.list {
  .rows {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 16px 24px;
    height: 195px;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
    .title {
      font-size: 22px;
      cursor: pointer;
    }
    .title:hover{
      color: red;
    }
    .content {
      margin: 30px 0;
      color: #555666;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 2; //自定义行数
    
    }
    .bottom {
      display: flex;
      justify-content: flex-end;
      color: #555666;
      gap: 20px;
    }
  }
}
</style>